<template>
	<view class="oa-content">
		<!-- 顶部自定义导航 -->
		<view class="">
			<tn-nav-bar customBack :bottomShadow="false" backgroundColor="#FFFFFF00">
				<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
					<text class='icon tn-icon-left-arrow'></text>
				</view>
				<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
					<text class="tn-text-bold tn-text-xl tn-color-white">客户公海</text>
				</view>
			</tn-nav-bar>
		</view>

		<view class="headdib" :style="{height: vuex_custom_bar_height + 66 +'px;'}"
			style="background-image:url(https://yirun-files.oss-cn-hangzhou.aliyuncs.com/images/2025/08/16/1755357378_68a0a0c2332200.62984500.png);width: 100vw;position: fixed;background-size: cover;overflow: hidden;z-index: 9;">
			<view class="top-fixed" :style="{paddingTop: vuex_custom_bar_height + 10 + 'px'}">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-padding-bottom-xs"
					style="background-color: #FFFFFF00;">

				</view>
			</view>
		</view>

		<view class="tn-padding-bottom-lg"
			:style="{paddingTop: vuex_custom_bar_height + 70 +'px', paddingBottom: '120rpx'}">
			<!-- 搜索栏 -->
			<view class="search-bar tn-margin tn-bg-white" style="border-radius: 24rpx;">
				<view class="tn-flex tn-flex-row-center tn-padding">
					<view class="search-input tn-flex-1 tn-margin-right">
						<input v-model="searchForm.name" placeholder="搜索客户姓名" class="tn-bg-gray--light tn-padding-sm"
							style="border-radius: 20rpx;" @confirm="handleSearch" />
					</view>
					<view class="search-input tn-flex-1 tn-margin-right">
						<input v-model="searchForm.mobile" placeholder="搜索手机号" class="tn-bg-gray--light tn-padding-sm"
							style="border-radius: 20rpx;" @confirm="handleSearch" />
					</view>
					<view class="search-btn tn-bg-blue tn-color-white tn-padding-sm"
						style="border-radius: 20rpx;min-width: 120rpx;text-align: center;" @click="handleSearch">
						搜索
					</view>
				</view>
			</view>




			<!-- 客户列表 -->
			<view class="customer-list">
				<customer-log-vue :list="customerList"></customer-log-vue>

				<!-- 加载更多 -->
				<view class="load-more tn-text-center tn-padding" v-if="customerList.length > 0">
					<view v-if="loading" class="tn-color-gray">
						<text class="tn-icon-loading tn-padding-right-xs"></text>加载中...
					</view>
					<view v-else-if="hasMore" class="tn-color-blue" @click="loadMore">
						点击加载更多
					</view>
					<view v-else class="tn-color-gray">
						没有更多数据了
					</view>
				</view>

				<!-- 空状态 -->
				<view class="empty-state tn-text-center tn-padding" v-if="customerList.length === 0 && !loading">
					<view class="tn-color-gray tn-padding-top-xl">
						<text class="tn-icon-empty tn-padding-right-xs" style="font-size: 80rpx;"></text>
					</view>
					<view class="tn-color-gray tn-padding-top">暂无客户数据</view>
				</view>
			</view>
		</view>

		<!-- 右下角浮动添加客户按钮 -->
		<view class="fab-button" @click="addCustomer" @longpress="showFabTooltip">
			<view class="fab-icon">
				<text class="tn-icon-add"></text>
			</view>
			<view class="fab-tooltip" v-if="showTooltip">添加客户</view>
		</view>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import customerLogVue from '@/crm/components/customer-log-vue.vue'
	export default {
		name: 'CustomerList',
		components: {
			customerLogVue
		},
		mixins: [template_page_mixin],
		data() {
			return {
				index: 0,
				array: ['新客户', '老客户'],
				showTooltip: false,

				activeItemStyle: {
					borderRadius: '100rpx',
					border: "1rpx solid #4B98FE",
					marginLeft: "30rpx",
					backgroundColor: '#F7ECEB',
				},
				inactiveItemStyle: {
					borderRadius: '100rpx',
					border: "1rpx solid #F2F2F2",
					marginLeft: "30rpx",
					backgroundColor: '#F2F2F2',
				},
				current1: 0,
				selectList: [{
						name: '我的客户',
						sceneType: 1
					},
					{
						name: '我参与客户',
						sceneType: 2
					},
					{
						name: '下属客户',
						sceneType: 3
					}
				],

				// 分页相关
				pageNo: 1,
				pageSize: 10,
				hasMore: true,
				loading: false,

				// 搜索表单
				searchForm: {
					name: '',
					mobile: '',
					sceneType: 1
				},

				// 客户列表
				customerList: [],

				// 统计数据
				statistics: {
					todayNew: 0,
					monthNew: 0,
					total: 0
				},
			}
		},
		onLoad() {
			this.loadCustomerList()
		},
		onReachBottom() {
			// 滚动到底部自动加载更多
			if (this.hasMore && !this.loading) {
				this.loadMore()
			}
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},

			// tab1选项卡切换-时间
			tabChange1(index) {
				this.current1 = index
				this.searchForm.sceneType = this.selectList[index].sceneType
				// 根据时间筛选重新加载数据
				this.resetAndReload()
			},

			// 搜索
			handleSearch() {
				this.resetAndReload()
			},

			// 重置并重新加载
			resetAndReload() {
				this.pageNo = 1
				this.customerList = []
				this.hasMore = true
				this.loadCustomerList()
			},

			// 加载客户列表
			async loadCustomerList() {
				if (this.loading) return

				this.loading = true
				try {
					const params = {
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						sceneType: this.searchForm.sceneType,

						pool: true
					}
					if (this.searchForm.name != '') {
						params.name = this.searchForm.name
					}
					if (this.searchForm.mobile = '') {
						params.mobile = this.searchForm.mobile
					}

					const response = await this.api.get('/crm/customer/page', {
						...this.e,
						...params
					})
					console.log(response)
					if (response.list) {
						const {
							list,
							total
						} = response

						if (this.pageNo === 1) {
							this.customerList = list
							// 更新统计数据
							this.statistics.total = total
						} else {
							this.customerList = [...this.customerList, ...list]
						}

						// 判断是否还有更多数据
						this.hasMore = this.customerList.length < total

						// 如果是第一页，更新统计数据
						if (this.pageNo === 1) {
							this.loadStatistics()
						}
					} else {
						uni.showToast({
							title: response.msg || '加载失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加载客户列表失败:', error)
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			// 加载更多
			loadMore() {
				if (this.hasMore && !this.loading) {
					this.pageNo++
					this.loadCustomerList()
				}
			},

			// 加载统计数据
			async loadStatistics() {
				try {
					// 这里可以调用统计接口，暂时使用列表数据计算
					// const response = await this.$api.get('/crm/customer/statistics')
					// if (response.code === 0) {
					//     this.statistics = response.data
					// }
				} catch (error) {
					console.error('加载统计数据失败:', error)
				}
			},

			// 查看客户详情
			viewCustomerDetail(customer) {
				uni.navigateTo({
					url: `/crm/customer/detail?id=${customer.id}`
				})
			},

			// 拨打固定电话
			callPhoneNumber(phoneNumber) {
				if (!phoneNumber) return

				wx.vibrateShort();
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
				});
			},

			// 格式化手机号
			formatPhone(phone) {
				if (!phone) return ''
				return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')
			},

			// 格式化日期
			formatDate(timestamp) {
				if (!timestamp) return ''
				const date = new Date(timestamp)
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
			},

			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},

			// 添加客户
			addCustomer() {
				uni.navigateTo({
					url: '/crm/customer/add',
				});
			},

			// 添加跟进记录
			addFollowUpRecord(customer) {
				uni.navigateTo({
					url: `/crm/follow-up-record/add?customerId=${customer.id}`,
				});
			},

			// 显示浮动按钮提示
			showFabTooltip() {
				this.showTooltip = true;
				setTimeout(() => {
					this.showTooltip = false;
				}, 2000);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.headdib {
		background-image: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1646056140125-assets/web-upload/5511fd0a-fc44-4b35-8f73-3bb44e953021.png);
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}
	}

	.oa-content {
		max-width: 640px;
		margin: 0 auto;
		background-color: #F8F7F8;
		min-height: 100vh;
		padding-bottom: 60rpx;
		padding-bottom: calc(80rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
	}

	.top-fixed {
		position: relative;
		width: 100%;
		transition: all 0.25s ease-out;
		z-index: 100;
		padding-bottom: 20rpx;
	}

	/* 搜索栏样式 */
	.search-bar {
		box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.search-input input {
		width: 100%;
		height: 70rpx;
		font-size: 28rpx;
	}

	.search-btn {
		height: 70rpx;
		// line-height: 70rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	/* 客户列表样式 */
	.customer-list {
		min-height: 200rpx;
	}

	.customer-item {
		box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.customer-item:active {
		transform: scale(0.98);
	}

	.customer-info {
		border-top: 1rpx solid #f0f0f0;
	}

	/* 加载更多样式 */
	.load-more {
		color: #999;
		font-size: 28rpx;
	}

	/* 空状态样式 */
	.empty-state {
		padding-top: 200rpx;
	}

	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/

	/* 商品 start*/
	.image-product {
		border-radius: 1000rpx;
		width: 80rpx;
		height: 80rpx;
		position: relative;
	}

	.image-good {
		width: 100%;
		height: 200rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top;
		border-radius: 1000rpx;
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 右下角浮动按钮 start*/
	.fab-button {
		position: fixed;
		right: 40rpx;
		bottom: calc(120rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		animation: fabFloat 0.3s ease-out;
	}

	.fab-icon {
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #4B98FE, #6BB6FF);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 25rpx rgba(75, 152, 254, 0.4);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.fab-icon:active {
		transform: scale(0.9);
		box-shadow: 0 4rpx 15rpx rgba(75, 152, 254, 0.6);
	}

	.fab-icon::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		transition: width 0.6s, height 0.6s;
	}

	.fab-icon:active::before {
		width: 200rpx;
		height: 200rpx;
	}

	.fab-icon .tn-icon-add {
		font-size: 60rpx;
		color: #FFFFFF;
		font-weight: bold;
	}

	.fab-tooltip {
		position: absolute;
		right: 140rpx;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(0, 0, 0, 0.8);
		color: #FFFFFF;
		padding: 16rpx 24rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		white-space: nowrap;
		animation: tooltipFade 0.3s ease-out;
	}

	.fab-tooltip::after {
		content: '';
		position: absolute;
		right: -8rpx;
		top: 50%;
		transform: translateY(-50%);
		border-left: 8rpx solid rgba(0, 0, 0, 0.8);
		border-top: 8rpx solid transparent;
		border-bottom: 8rpx solid transparent;
	}

	@keyframes tooltipFade {
		from {
			opacity: 0;
			transform: translateY(-50%) translateX(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(-50%) translateX(0);
		}
	}

	@keyframes fabFloat {
		from {
			transform: translateY(100rpx) scale(0.8);
			opacity: 0;
		}

		to {
			transform: translateY(0) scale(1);
			opacity: 1;
		}
	}

	/* 右下角浮动按钮 end*/
</style>